<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body,html{
			width: 100%;
			height: 100%;
			
		}
		*{
			margin: 0;padding: 0;
			list-style-type: none;
		}
		.head{
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			height: 50px;
			width: 100vw;
			align-items: center;
			justify-content: space-around;
			background-color: aqua;
			font-size: 14px;
		}
		.wrap{
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.bread{
			position: absolute;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			font-size: 22px;
		}
		img{
			position: fixed;
			width: 30px;
			height: 30px;
			left: 0;
			top: 0;
			transform: rotateY(180deg);
			transition: all .2s;
		}
	</style>
</head>
<body onkeydown="handel(event)">
	<div class="head">
		<div class="jindu"><span style="color: red;">已拾取: </span><span id="content"></span></div>
		<div class="guanqia">1</div>
		<div class="target"><span  style="color: red;">原始内容: </span><span id="targetSource"></span></div>
	</div>
	<div class="wrap"></div>
	<img src="./images/pao.gif" alt="" id=lieren>
	<script>
		var wrap = document.getElementsByClassName('wrap')[0]
		var guanQiaNum = document.getElementsByClassName('guanqia')[0]
		var target = document.getElementsByClassName('target')[0]
		var content = document.getElementById('content')
		wrap.style.height = window.innerHeight-50+'px'
		var wrapInfo = wrap.getBoundingClientRect()
		var heightNum = parseInt(wrapInfo.height/30)
		var widthNum = parseInt(wrapInfo.width/30)
		var arr = ['不会,不会,学了吗就说不会,不学就想会梦都没这么做的',
		'有时间看电视打游戏,你来这就为这?',
		'社会不会惯着你,当你举步维艰,为了那每天仨瓜俩枣辛苦当孙子的时候想想早干嘛去了',
		'没有谁有义务和责任包容你,社会的渣仔最终要被搅烂撕碎',
		'任何感情的维系都是需要金钱,否则人往高处走,你品你细品']
		var guanqia = 0
		var breadPoint=[]
		var renPoint={x:0,y:0}
		initBread()
		function initBread(){
			wrap.innerHTML = ''
			guanQiaNum .innerHTML = ('<span  style="color: red;">关卡: </span>'+ (guanqia+1))
			breadPoint = []
			var item = arr[guanqia]
			renPoint = {x:0,y:0}
			targetSource.innerHTML = item
			content.innerHTML = ''
			for(var i=0;i<item.length;i++){
				var top = parseInt(Math.random()*heightNum)*30
				var left = parseInt(Math.random()*widthNum)*30
				breadPoint.push({x:left,y:top})
				wrap.innerHTML+='<div class=bread id=z'+String(left)+top+' style=left:'+left+'px;top:'+top+'px>'+item[i]+'</div>'
			}
			if(isChongdie()){
				initBread()
			}
		}
		function isChongdie(){
			var result = false
			for(var i=0;i<breadPoint.length;i++){
				for(var j=i+1;j<breadPoint.length;j++){
				if(breadPoint[i].x == breadPoint[j].x && breadPoint[i].y == breadPoint[j].y){
					result = true
					break
				}
			}
			}
			return result
		}
		
		function handel(e){
			if(e.key == 'ArrowRight'){
				move('right')
			}
			if(e.key == 'ArrowLeft'){
				move('left')
			}
			if(e.key == 'ArrowUp'){
				move('up')
			}
			if(e.key == 'ArrowDown'){
				move('down')
			}
		}
		var lieren = document.getElementById('lieren')
		var next = {
			'right':function(){
				lieren.style.transform='rotateY(180deg)'
				if(renPoint.x+30>=window.innerWidth) return
				lieren.style.left = (renPoint.x+=30)+'px'},
			'left':function(){
				lieren.style.transform='rotateY(0deg)'
				if(renPoint.x-30<0) return
				lieren.style.left = (renPoint.x-=30)+'px'},
			'up':function(){
				if(renPoint.y-30<0) return
				lieren.style.top = (renPoint.y-=30)+'px'},
			'down':function(){
				if(renPoint.y+30>(window.innerHeight-50)) return
				lieren.style.top = (renPoint.y+=30)+'px'},
		}
		var timer;
		move('right')
		function move(flg){
			clearInterval(timer)
			timer = setInterval(()=>{
				next[flg]()
			isHnaZiLieRenChongDie()
			if(isShengli()){
				guanqia++
				lieren.style.left='0px'
				lieren.style.top='0px'
				initBread()
				move('right')
			}
			},300)
		}
		function isHnaZiLieRenChongDie(){
			var point = lieren.getBoundingClientRect()
			for(var i=0;i<breadPoint.length;i++){
				if(lieren.offsetLeft==breadPoint[i].x&&lieren.offsetTop==breadPoint[i].y){
					var atHanz = document.getElementById('z'+String(breadPoint[i].x)+breadPoint[i].y)
					content.innerHTML+=atHanz.innerHTML
					atHanz.style.display='none'
					breadPoint.splice(i,1)
					break
				}
			}
		}
		function isShengli(){
			var result;
			if(content.innerHTML.length!=0 && content.innerHTML.length==targetSource.innerHTML.length){
				result = true
				for(var i=0;i<content.innerHTML.length;i++){
					if(content.innerHTML[i]!=targetSource.innerHTML[i]){
						result = false
						clearInterval(timer)
						alert('失败')
						break
					}
				}
				return result
			}
			return false
		}
	</script>
</body>
</html>